<template>
    <div class="tea-gift">
        <ul>
            <li v-for="(item, index) in giftList" :key="index"
            @click="goDetail(item.id)">
                <img :src="item.imgUrl" alt="">
                <h4>{{item.name}}</h4>
            </li>
      </ul>
    </div>
</template>
  
  <script>
  export default {
    data() {
        return {
            giftList: [
                {
                    id: 1,
                    name: '茶礼盒',
                    imgUrl: require('@/assets/img/gift_box.jpg')
                }
            ]
        }
    },
    methods :{
        goDetail(id) {
            this.$router.push({path: '/detail', query: {id: id}})
            window.scrollTo(0, 0);
        }
    }
  }
</script>
  
<style scoped> 
.tea-gift {
    background-color: white;
}
.tea-gift img {
    width: 66px;
    height: 66px;
}
.tea-gift h4 {
    font-size: 16px;
    font-weight: 400px;
}
.tea-gift ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 10px;
    margin-top: 30px;
}
.tea-gift li {
    list-style: none;
    width: 30%;
    margin-bottom: 20px;
    text-align: center;
}
</style>